<template>
	<div class="echarts">
		<div id="bar"></div>
	</div>
</template>
<script>
	import * as echarts from "echarts";
	import axios from "axios";
	import formater from 'time-formater'
	export default {
		name: "Interface",
		data() {
			return {
				dateList: [],
				listData: [[], [], []],
			};
		},
		mounted() {
			for(var i=6;i>-1;i--){
				let time = formater(new Date().getTime() - 86400000*i).format('YYYY-MM-DD')
				this.dateList.push(time)
			}
			this.$nextTick(() => {
				this.init();
				this.ldainit();
			});
		},
		methods: {
			init() {
				var chartDom = document.getElementById("bar");
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					color: ["#5470c6","#e5323e","#655535"],
					title: {
						text: "走势图",
						subText: "",
					},
					tooltip: {
						trigger: "axis",
					},
					legend: {
						data: ["新注册用户", "新增订单", "新增管理员"],
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					xAxis: {
						type: "category",
						data: this.dateList,
						boundaryGap: false,
					},
					yAxis: [
						{
							type:"value",
							name:"用户",
							max:200,
							min:0,
							axisLine:{
								show :true
							}
						},
						{
							type:"value",
							name:"订单",
							max:200,
							min:0,
							axisLine:{
								show :true
							}
						}


					],
					series: [
						{
							name: "新注册用户",
							type: "line",
							data: this.listData[0],
							markPoint: {
								data: [{
									type: "max",
									name: "Max"
								}, {
									type: "min",
									name: "Min"
								}]
							},
						},
						{
							name: "新增订单",
							type: "line",
							data: this.listData[1],
							markPoint: {
								data: [{
									type: "max",
									name: "Max"
								}, {
									type: "min",
									name: "Min"
								}]
							},
						},
						{
							name: "新增管理员",
							type: "line",
							data: this.listData[2],
							markPoint: {
								data: [{
									type: "max",
									name: "Max"
								}, {
									type: "min",
									name: "Min"
								}]
							},
						},
					],
				};

				option && myChart.setOption(option);
				window.onresize= ()=>{
					option && myChart.resize()
				}
			},
			ldainit() {
				this.dateList.forEach((item) => {
					axios
						.get(`https://elm.cangdu.org/statis/user/${item}/count`)
						.then((res) => {
							this.listData[0].push(res.data.count);
						});
					axios
						.get(`https://elm.cangdu.org/statis/order/${item}/count`)
						.then((res) => {
							this.listData[1].push(res.data.count);
						});
					axios
						.get(`https://elm.cangdu.org/statis/admin/${item}/count`)
						.then((res) => {
							this.listData[2].push(res.data.count);
						});
				});
			},
		},
		watch: {
			listData(val) {
				this.init();
			},
		},
	};
</script>
<style scoped>
	#bar {
		width: 70%;
		height: 500px;
	}
</style>
